<template>
  <div class="userManage">
    <el-card shadow="never">
      <div class="header">
        <div class="page-header">
          <el-page-header @back="goBack" content="管理用户" style="margin-bottom: 20px">
          </el-page-header>
        </div>
      </div>

      <el-table
          :data="UserTable"
          style="width: 100%"
          stripe>
        <el-table-column
            label="序号"
            type="index"
            :index="indexMethod">
        </el-table-column>
        <el-table-column
            prop="userName"
            label="用户名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="realName"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="userSex"
            label="性别">
          <template slot-scope="scope">
            <span v-if="scope.row.userSex == 0"><el-tag type="danger" size="small" color="">女</el-tag></span>
            <span v-else><el-tag type="info" size="small" color="">男</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column
            prop="userPhone"
            label="账号">
        </el-table-column>
        <el-table-column
            prop="userType"
            label="身份类型"
            :filters="[{ text: '游客', value: 1 }, { text: '村民', value: 0 }]"
            :filter-method="filterTag"
            filter-placement="bottom-end">
          <template slot-scope="scope">
            <span v-if="scope.row.userType == 1"><el-tag size="small" color="">游客</el-tag></span>
            <span v-else><el-tag  type="success" size="small" color="">村民</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button slot="reference" type="text" size="mini"  @click="deleteUserById(scope.row.userId)">删除</el-button>
          </template>
        </el-table-column>


      </el-table>

      <div style="padding: 10px 0">
        <el-pagination
            :page-sizes="[2, 5, 10, 20]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total
            :current-page=this.pageNum
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>


    </el-card>
  </div>
</template>

<script>
import {deleteUserById, getUserPage} from "@/api/allApi";

export default {
  name: "UserManage",
  data(){
    return {
      UserTable:[],
      pageSize:5,
      total:0,
      pageNum:1,
    }
  },
  methods:{
    getUserPage() {
      getUserPage({
        current:this.pageNum,
        pageSize:this.pageSize
      }).then(res=>{
        this.UserTable = res.data.data
        this.total = res.data.total
      })
    },
    goBack() {
      this.$router.back();
    },
    deleteUserById(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUserById(id).then(res=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getUserPage()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    filterTag(value, row) {
      return row.userType === value;
    },
    indexMethod(index) {
      // 当前页数 - 1 * 每页数据条数 + 1
      const page = this.pageNum // 当前页码
      const pagesize = this.pageSize // 每页条数
      return index + 1 + (page - 1) * pagesize
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.getUserPage();
    },
    handleCurrentChange(pageNum){
      this.pageNum=pageNum;
      this.getUserPage();
    },
  },
  mounted() {
    this.getUserPage()
  }
}
</script>

<style lang="less" scoped>
  .userManage {
    margin-top: 30px;

    .header {
      display: flex;
      justify-content: space-between;
    }

    .page-header {
      width: 20%;
    }

    .buttons {
      margin: 0px 0 10px 0;
    }
  }
</style>